<!DOCTYPE html>
<html lang="en">
<head>
    <title>快速量化响应技术平台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="./css/leaflet.css"/>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="./css/home.css"/>

    <link rel="stylesheet" href="./iconfont/iconfont.css">

    <!-- 自定义选项样式 -->
    <link rel="stylesheet" type="text/css" href="./css/customstyle.css">
    <link rel="stylesheet" type="text/css" href="./css/radio.css">
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <link rel="stylesheet" type="text/css" href="./css/timeline.css">
    <link rel="stylesheet" type="text/css" href="./css/emission.css">
    <link rel="stylesheet" type="text/css" href="./css/emissionmedia.css">
    
	<script type="text/javascript" src="./js/main.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/bootstrap.min.js"></script>
    <script type="text/javascript" src="./lib/timeline.js"></script>
    <!--[if lte IE 8]>
    <link href="./css/ie8.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <script type="text/javascript" src="./lib/modernizr.js"></script>
    <!--[if IE]>
    <script type="text/javascript" src="./lib/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="map"></div>
<div class="container-fluid">
    <div class="container_left">
        <ul class="nav nav-tabs tabs_left" role="tablist">
            <li role="presentation" class="active">
                <a data-toggle="tab" href="#monitor_station" role="tab" aria-controls="monitor_station">监测站</a>
            </li>
            <li role="presentation">
                <a data-toggle="tab" href="#administrative_zone" role="tab" aria-controls="administrative_zone">行政区</a>
            </li>
            <li role="presentation">
                <a data-toggle="tab" href="#grids" role="tab" aria-controls="grids">网格</a>
            </li>
            <li role="presentation">
                <a data-toggle="tab" href="#emission_source" role="tab" aria-controls="emission_source">排放源</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="monitor_station" role="tabpanel">
                <div class="radio_title">监测站</div>
                <div class="tabs_radios" id="monitor_radio_emission">
                    <div class="tabs_radio">
                        <input type="radio"  value="PM25" onclick="lengedSelected()" id="tabs_radio-monitor00-1" name="monitor00_radio" checked="checked" /><label for="tabs_radio-monitor00-1"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" value="no" onclick="lengedSelected()" id="tabs_radio-monitor00-2" name="monitor00_radio" /><label for="tabs_radio-monitor00-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" value="so2" onclick="lengedSelected()" id="tabs_radio-monitor00-3" name="monitor00_radio" /><label for="tabs_radio-monitor00-3"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" value="pm10" onclick="lengedSelected()" id="tabs_radio-monitor00-4" name="monitor00_radio" /><label for="tabs_radio-monitor00-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" value="co" onclick="lengedSelected()" id="tabs_radio-monitor00-5" name="monitor00_radio" /><label for="tabs_radio-monitor00-5"><span>CO</span></label>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="administrative_zone" role="tabpanel">
                <div class="radio_title">行政区</div>
                <div class="tabs_radios">
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative00-1" name="administrative00_radio" checked="checked" /><label for="tabs_radio-administrative00-1"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative00-2" name="administrative00_radio" /><label for="tabs_radio-administrative00-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative00-3" name="administrative00_radio" /><label for="tabs_radio-administrative00-3"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative00-4" name="administrative00_radio" /><label for="tabs_radio-administrative00-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative00-5" name="administrative00_radio" /><label for="tabs_radio-administrative00-5"><span>PM2.5</span></label>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="grids" role="tabpanel">
                <div class="radio_title">网格</div>
                <div class="tabs_radios">
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids00-1" name="grids00_radio" checked="checked" /><label for="tabs_radio-grids00-1"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids00-2" name="grids00_radio" /><label for="tabs_radio-grids00-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids00-3" name="grids00_radio" /><label for="tabs_radio-grids00-3"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids00-4" name="grids00_radio" /><label for="tabs_radio-grids00-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids00-5" name="grids00_radio" /><label for="tabs_radio-grids00-5"><span>PM2.5</span></label>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="emission_source" role="tabpanel">
                <div class="radio_title">排放源</div>
                <div class="tabs_radios">
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission00-1" name="emission00_radio" checked="checked" /><label for="tabs_radio-emission00-1"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission00-2" name="emission00_radio" /><label for="tabs_radio-emission00-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission00-3" name="emission00_radio" /><label for="tabs_radio-emission00-3"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission00-4" name="emission00_radio" /><label for="tabs_radio-emission00-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission00-5" name="emission00_radio" /><label for="tabs_radio-emission00-5"><span>PM2.5</span></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container_center">
        <div class="center_header">
            <div class="header_catalogue header_item"><i class="catalogue_icon iconfont icon-catalogue"></i></div>
            <div class="header_item header_response">快速量化响应技术平台</div>
            <div class="header_item"><i class="search_icon iconfont icon-iconfontzhizuobiaozhun22"></i><input type="text" name="search" class="header_search"></div>
            <div class="header_item header_item_padding"><i class="scene_icon iconfont icon-ic_timer"></i><a href="index.html">实况</a></div>
            <div class="header_item header_item_padding"><i class="forecast_icon iconfont icon-diqiuquanqiu"></i><a href="#">预报</a></div>
            <div class="header_item header_item_padding"><i class="warn_icon iconfont icon-lingdang"></i><a href="#">应急</a></div>
            <div class="header_item header_item_padding"><i class="assess_icon iconfont icon-wenjian"></i><a href="#">评估</a></div>
            <div class="header_item header_item_padding"><i class="emission_icon iconfont icon-radiation-emp"></i><a href="emission.html">排放</a></div>
        </div>
    </div>

    <div class="center_bottom">
        <div class="progressTimebox">
            <div id="progressTime_control" onclick="progressTimeControl(this)" title="开始"></div>
            <div class="progressTime" id="progressTime" style="z-index:9">
                <div>
                    <p id="startTime" style=" float:left;margin-left:33px;opacity: 0;display: none;"></p>
                    <p  id="endTime" style=" float:right;margin-right:33px;opacity: 0;display: none;"></p>
                </div>
                <div class="time_slot">
                    <p>06</p>
                    <p>07</p>
                    <p>08</p>
                    <p>09</p>
                    <p>10</p>
                </div>
                <div id="progressTime_concent">
                    <div id="scrollBarBox">
                        <div id="scrollBar">
                            <div id="scroll_Track"></div>
                            <div id="scroll_Thumb"></div>
                        </div>
                    </div>
                    <div class="timecode"></div>
                    <div style="width:90%; margin-left: auto;margin-right: auto;">
                        <div style="width:300px;float:right;margin-right:-110px;margin-top:-8px">
                            <p id="TimeSpeed" style="float:left;margin-right:40px;display:none">×1</p>
                            <p style="float:right" id="scrollBarTxt"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="legend" data-ref="legend" class="metric-legend noselect legend-for-temp" data-tooltipsrc="CLICK_ON_LEGEND" data-tooltip="点击更改单位">
            <span style="background: rgb(149,136,211); width:12.5%">°C</span>
            <span style="background: linear-gradient(to right, rgb(149,136,211), rgb(149,136,211), rgb(150,208,216)); width: 12.5%">-20</span>
            <span style="background: linear-gradient(to right, rgb(150,208,216), rgb(128,203,197), rgb(102,179,186)); width: 12.5%">-10</span>
            <span style="background: linear-gradient(to right, rgb(102,179,186), rgb(94,143,197), rgb(79,139,61)); width: 12.5%">0</span>
            <span style="background: linear-gradient(to right, rgb(79,139,61), rgb(121,146,28), rgb(170,160,14)); width: 12.5%">10</span>
            <span style="background: linear-gradient(to right, rgb(170,160,14), rgb(222,177,6), rgb(242,150,6)); width: 12.5%">20</span>
            <span style="background: linear-gradient(to right, rgb(242,150,6), rgb(236,94,20), rgb(190,65,18)); width: 12.5%">30</span>
            <span style="background: linear-gradient(to right, rgb(190,65,18), rgb(138,42,10), rgb(138,42,10)); width: 12.5%">40</span>
        </div>
    </div>

    <div class="container_right" style="display: none">
        <ul class="nav nav-tabs tabs_right" role="tablist">
            <li role="presentation" class="active">
                <a data-toggle="tab" href="#monitor_station01" role="tab" aria-controls="monitor_station01">监测站</a>
            </li>
            <li role="presentation">
                <a data-toggle="tab" href="#administrative_zone01" role="tab" aria-controls="administrative_zone01">行政区</a>
            </li>
            <li role="presentation">
                <a data-toggle="tab" href="#grids01" role="tab" aria-controls="grids01">网格</a>
            </li>
            <li role="presentation">
                <a data-toggle="tab" href="#emission_source01" role="tab" aria-controls="emission_source01">排放源</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="monitor_station01" role="tabpanel">
                <div class="radio_title">监测站</div>
                <div class="tabs_radios">
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-monitor01-1" name="monitor01_radio" checked="checked" /><label for="tabs_radio-monitor01-1"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-monitor01-2" name="monitor01_radio" /><label for="tabs_radio-monitor01-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-monitor01-3" name="monitor01_radio" /><label for="tabs_radio-monitor01-3"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-monitor01-4" name="monitor01_radio" /><label for="tabs_radio-monitor01-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-monitor01-5" name="monitor01_radio" /><label for="tabs_radio-monitor01-5"><span>PM2.5</span></label>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="administrative_zone01" role="tabpanel">
                <div class="radio_title">行政区</div>
                <div class="tabs_radios">
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative01-1" name="administrative01_radio" checked="checked" /><label for="tabs_radio-administrative01-1"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative01-2" name="administrative01_radio" /><label for="tabs_radio-administrative01-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative01-3" name="administrative01_radio" /><label for="tabs_radio-administrative01-3"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative01-4" name="administrative01_radio" /><label for="tabs_radio-administrative01-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-administrative01-5" name="administrative01_radio" /><label for="tabs_radio-administrative01-5"><span>PM2.5</span></label>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="grids01" role="tabpanel">
                <div class="radio_title">网格</div>
                <div class="tabs_radios">
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids01-1" name="grids01_radio" checked="checked" /><label for="tabs_radio-grids01-1"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids01-2" name="grids01_radio" /><label for="tabs_radio-grids01-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids01-3" name="grids01_radio" /><label for="tabs_radio-grids01-3"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids01-4" name="grids01_radio" /><label for="tabs_radio-grids01-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-grids01-5" name="grids01_radio" /><label for="tabs_radio-grids01-5"><span>PM2.5</span></label>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="emission_source01" role="tabpanel">
                <div class="radio_title">排放源</div>
                <div class="tabs_radios">
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission01-1" name="emission01_radio" checked="checked" /><label for="tabs_radio-emission01-1"><span>SQ2</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission01-2" name="emission01_radio" /><label for="tabs_radio-emission01-2"><span>NOx</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission01-3" name="emission01_radio" /><label for="tabs_radio-emission01-3"><span>PM2.5</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission01-4" name="emission01_radio" /><label for="tabs_radio-emission01-4"><span>PM10</span></label>
                    </div>
                    <div class="tabs_radio">
                        <input type="radio" id="tabs_radio-emission01-5" name="emission01_radio" /><label for="tabs_radio-emission01-5"><span>PM2.5</span></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./js/main.min.js"></script>
<script>
    var map = L.map('map');
    L.tileLayer('http://173.0.20.110:8099/geoq_tiles/{z}/{y}/{x}.png').addTo(map),
    map.setView(L.latLng(37.550339, 104.114129), 4);
    var overlay = new L.echartsLayer3(map, echarts);
    var chartsContainer = overlay.getEchartsContainer();
    var myChart = overlay.initECharts(chartsContainer);

    var arr1;
    var arr2;

    // function getData(){
    $.ajax({
        type:"get",
        url:"./data/12.json",
        data:{},
        async:false,
        dataType:"json",
        success:function (res) {
            arr2 = res;
        },
        error:function (err) {
            console.log('err=' + err)
        }
    });

    $.ajax({
        type:"get",
        url:"./data/station.json",
        data:{},
        async:false,
        dataType:"json",
        success:function (res) {
            arr1 = res;
        },
        error:function (err) {
            console.log('err=' + err)
        }
    });

    var merge = [], kvIndex = {};
    for(var i = 0;i<arr1.length;i++){
        for(var j = 0;j<arr2.length; j++){
            if(arr1[i].position_name == arr2[j].position_name){
                var Item;
                if(kvIndex[arr1[i].position_name] == undefined){
                    kvIndex[arr1[i].position_name] = merge.length;
                    item = {};
                    for(var attr in arr1[i]){
                        item[attr] = arr1[i][attr];
                        merge[kvIndex[arr1[i].position_name]] = item;
                    }
                }else {
                    item = merge[kvIndex[arr1[i].position_name]];
                }
                for(var attr in arr2[j]){
                    item[attr] = arr2[j][attr];
                }
            }
        }
    }

    var PM25Data = [];
    for(var z=0;z<merge.length;z++){
        var latlong = [];
        latlong.push(merge[z].longitude,merge[z].latitude,merge[z].pm2_5,merge[z].so2,merge[z].o3_24h);
        PM25Data.push({
            name:merge[z].position_name,
            value:latlong
        })
    }

    option1 = {
        tooltip : {
            trigger: 'item'
        },
        legend: {
            id:'legendTest',
            show: false,
            orient: 'vertical',
            data:['PM25',"so2","co"],
            right:20,
            top:70,
            textStyle: {
                color: '#fff',
                fontSize:14
            },
            selectedMode:'single',
            selected:{
                'PM25':true,
                'so2':false,
                'co':false
            }
        },
        visualMap: {
            min: 0,
            max: 300,
            splitNumber: 5,
            orient:'horizontal',
            precision:1,
            align:'left',
            itemHeight:10,
            itemWidth:20,
            left:'right',
            textGap:0,
            bottom:20,
            inRange: {
                color: ['#71ca5c', '#f3ef45','#e17e3b','#c5312d','#821c43','#70192a']
            },
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: '',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series : [
            {
                name: 'PM25',
                id:'PM25',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: PM25Data,
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ddb926'
                    }
                }
            },
            {
                name: 'so2',
                id:'so2',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: PM25Data,
                symbolSize: function (val) {
                    return val[3] / 8;
                },
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FF0000'
                    }
                }
            },
            {
                name: 'co',
                id:'co',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: PM25Data,
                symbolSize: function (val) {
                    return val[4] / 8;
                },
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FF7F24'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option1);

  var monitor_radio_emission = document.getElementById('monitor_radio_emission');
  var monitor_emission_radios = monitor_radio_emission.getElementsByTagName('input');
  
 
  function lengedSelected(){
    var radioValue;
    for(var i = 0;i<monitor_emission_radios.length;i++){
      if(monitor_emission_radios[i].checked){
        radioValue = monitor_emission_radios[i].value;
        myChart.dispatchAction({
          type:'legendToggleSelect',
          name:radioValue
        })
      }
    }
    console.log(radioValue);
  }

</script>

</body>
</html>
